<!-- 用户登录模块 -->
<section id="<?= $data['type'] ?? 'login' ?>" class="py-[<?= $data['styles']['padding']['top'] ?? '40' ?>px] pb-[<?= $data['styles']['padding']['bottom'] ?? '40' ?>px] bg-[<?= $data['styles']['backgroundColor'] ?? '#F8F9FA' ?>]" style="border-radius: <?= $data['styles']['borderRadius'] ?? '8px' ?>; max-width: <?= $data['styles']['maxWidth'] ?? '400px' ?>; margin: <?= $data['styles']['margin'] ?? '0 auto' ?>; box-shadow: <?= $data['styles']['boxShadow'] ?? '0 4px 12px rgba(0,0,0,0.05)' ?>">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div>
          <?php if (!empty($data['content']['logo'])): ?>
            <div class="flex justify-center mb-6">
              <img src="<?= $data['content']['logo']['image'] ?>" alt="<?= $data['content']['logo']['alt'] ?>" class="h-16">
            </div>
          <?php endif; ?>
          
          <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
            <?= $data['content']['sectionBadge'] ?>
          </div>
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
            <?= $data['content']['sectionTitle'] ?>
          </h2>
          <p class="text-dark/70 mb-8">
            <?= $data['content']['sectionSubtitle'] ?>
          </p>
          
          <form class="space-y-4">
            <?php if (!empty($data['content']['form']['fields'])): ?>
              <?php foreach ($data['content']['form']['fields'] as $field): ?>
                <div>
                  <label for="login_<?= $field['name'] ?>" class="block text-sm font-medium text-dark/70 mb-1"><?= $field['label'] ?><?= $field['required'] ? ' *' : '' ?></label>
                  <input 
                    type="<?= $field['type'] === 'password' ? 'password' : 'text' ?>" 
                    id="login_<?= $field['name'] ?>" 
                    class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" 
                    placeholder="<?= $field['placeholder'] ?>"
                    <?= $field['required'] ? 'required' : '' ?>
                  >
                </div>
              <?php endforeach; ?>
            <?php endif; ?>
            
            <div class="flex items-center justify-between">
              <?php if (!empty($data['content']['form']['rememberMe']) && $data['content']['form']['rememberMe']['enabled']): ?>
                <label class="flex items-center">
                  <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary/50 border-gray-300 rounded">
                  <span class="ml-2 text-sm text-dark/70"><?= $data['content']['form']['rememberMe']['label'] ?></span>
                </label>
              <?php endif; ?>
              
              <?php if (!empty($data['content']['form']['forgotPassword']) && $data['content']['form']['forgotPassword']['enabled']): ?>
                <a href="<?= $data['content']['form']['forgotPassword']['href'] ?? '#' ?>" class="text-sm text-primary hover:underline"><?= $data['content']['form']['forgotPassword']['text'] ?></a>
              <?php endif; ?>
            </div>
            
            <button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom font-medium">
              <?= $data['content']['form']['submitButton']['text'] ?? '登录' ?>
            </button>
          </form>
          
          <?php if (!empty($data['content']['socialLogin']) && $data['content']['socialLogin']['enabled']): ?>
            <div class="relative my-8">
              <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-200"></div>
              </div>
              <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-[<?= $data['styles']['backgroundColor'] ?? '#F8F9FA' ?>] text-dark/50"><?= $data['content']['socialLogin']['title'] ?></span>
              </div>
            </div>
            
            <div class="grid grid-cols-<?= count($data['content']['socialLogin']['providers']) ?> gap-4">
              <?php foreach ($data['content']['socialLogin']['providers'] as $provider): ?>
                <a href="#" class="w-full h-12 flex items-center justify-center border border-gray-200 rounded-lg hover:bg-gray-50 transition-custom">
                  <i class="fa fa-<?= $provider['icon'] ?> text-xl" style="color: <?= $provider['color'] ?>"></i>
                </a>
              <?php endforeach; ?>
            </div>
          <?php endif; ?>
          
          <?php if (!empty($data['content']['registerOption']) && $data['content']['registerOption']['enabled']): ?>
            <div class="text-center mt-8">
              <p class="text-dark/70">
                <?= $data['content']['registerOption']['text'] ?> <a href="<?= $data['content']['registerOption']['href'] ?? '#' ?>" class="text-primary font-medium hover:underline"><?= $data['content']['registerOption']['linkText'] ?></a>
              </p>
            </div>
          <?php endif; ?>
        </div>
        
        <div class="hidden lg:block relative">
          <img src="https://picsum.photos/seed/login/600/400" alt="欢迎登录" class="w-full h-auto rounded-2xl shadow-lg">
          <div class="absolute bottom-6 left-6 bg-white p-6 rounded-xl shadow-md max-w-xs">
            <div class="flex items-center mb-4">
              <div class="w-12 h-12 rounded-full overflow-hidden mr-3">
                <img src="https://picsum.photos/seed/avatar/100/100" alt="用户头像" class="w-full h-full object-cover">
              </div>
              <div>
                <h4 class="font-bold">张先生</h4>
                <p class="text-dark/70 text-sm">某制造业企业CEO</p>
              </div>
            </div>
            <p class="text-dark/80 italic">
              "智联科技的数字化解决方案帮助我们的企业效率提升了45%，非常满意！"
            </p>
            <div class="flex mt-3">
              <i class="fa fa-star text-yellow-400"></i>
              <i class="fa fa-star text-yellow-400"></i>
              <i class="fa fa-star text-yellow-400"></i>
              <i class="fa fa-star text-yellow-400"></i>
              <i class="fa fa-star text-yellow-400"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>